import { defineComponent, onMounted, reactive } from "vue";
import styles from "./authenticate.module.less";
import { $captcha } from "@/api/captcha/captcha";
import { useStore as useUserStore } from "@/store/user";
import { useStore as useInfoStore } from "@/store/userinfo";
import useSmsRefund from "@/hooks/useSmsRefund";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { $verifyIdentity } from "@/api/account/account";
export default defineComponent({
  name:'accountUserinfoChangePasswordAuthenticate',
  setup() {
    const userStore = useUserStore();
    const infoStore= useInfoStore();

    const smsRefund = useSmsRefund();
    const router = useRouter();
    const state = reactive({
      current: 0,
      steps: [
        {
          title: '验证身份',
        },
        {
          title: '修改密码登录'
        },
        {
          title: '完成'
        }
      ],
      img: '',
      form: {
        mobile: '',
        code: '',
        syncCode: '',
      },
      level: [],
      btn_text: '下一步',
    } as any);

    //获取图形验证码
    const requestCode = () => {
      $captcha({}).then((res: any) => {
        state.img = res.data.img;
      })
    }

    //获取短信验证码
    const sendMobileCode = () => {
      let param = {
        mobile: state.form.mobile,
        captcha: state.form.code,
        scene: 'user.modifyPwd',
      }
      smsRefund.sendSms(param);
    }

    const code_check = async (_rule: any, value: string) => {
      if (value === '') {
        return Promise.reject('请输入图形验证码!');
      }
    }

    const syncCode_check = async (_rule: any, value: string) => {
      if (value === '') {
        return Promise.reject('请输入短信验证码!');
      }
    }

    // 表单验证
    const rules = {
      code: [{ required: true, validator: code_check, trigger: 'change' }],
      syncCode: [{ required: true, validator: syncCode_check, trigger: 'change' }],
    }

    //下一步
    const nextStep = () => {
      if (!(state.form.code && state.form.syncCode)) {
        message.error('请输入验证码');
        return;
      }
      $verifyIdentity({ code: state.form.syncCode }).then((res: any) => {
        infoStore.setPasswordFlag(res.data.flag || '');
        console.log(infoStore.passwordFlag);
        message.success('验证成功')
        router.push('/account/userinfo/changePassword/resetPassword')
      })
    }

    onMounted(() => {
      requestCode();
      state.form.mobile = userStore.user_info.mobile;
    })
    return () => (
      <div class={styles.Authenticate}>
        <div class={styles.header}>修改登录密码</div>
        <div class={styles.container}>
          <a-steps current={state.current}>
            <a-step title={'验证身份'}></a-step>
            <a-step title={'修改登录密码'}></a-step>
            <a-step title={'完成'}></a-step>
          </a-steps>
          <div class={styles['form-box']}>
            <a-form model={state.form} rules={rules} label-col={{ style: { width: '120px' } }} wrapper-col={{ span: 28 }}>
              <a-form-item required label="验证手机号" name="mobile">
                {
                  !state.form.mobile || <span>{state.form.mobile.slice(0, 3) + '****' + state.form.mobile.slice(-4)}</span>
                }
              </a-form-item>
              <div style={{ display: 'flex' }}>
                <a-form-item required label="图形验证码" name="code">
                  <a-input style={{ width: '150px' }} v-model:value={state.form.code} maxlength={4} />
                </a-form-item>
                <a-form-item wrapper-col={{ span: 5 }}>
                  <div class={styles['code-img']}>
                    <img src={state.img} onClick={() => { requestCode() }} />
                  </div>
                </a-form-item>
              </div>
              <div style={{ display: 'flex' }}>
                <a-form-item required label="短信验证码" name="syncCode">
                  <a-input style={{ width: '150px' }} v-model:value={state.form.syncCode} maxlength={6} />
                </a-form-item>
                <a-form-item wrapper-col={{ span: 5 }}>
                  <div class={[styles['send-btn']]} onClick={() => { sendMobileCode() }}>{smsRefund.show_text.value}</div>
                </a-form-item>
              </div>
            </a-form>
            <div class={styles['nextStep-btn']} onClick={() => { nextStep() }}>{state.btn_text}</div>
          </div>
        </div>
      </div>
    )
  }
})